<template>
  <div id="driverwrite">
    <h1 class="titleTag">审核</h1>
    <div v-show="!show" class="cardtwo">
      <h2 class="title2">法人身份证</h2>
      <el-row :gutter="100">
        <el-col :span="10">
          <div class="image image2">
            <img style="width:100%: overflow: hidden"
              :src="$route.query.data.idenFaceImg" alt="" srcset="">
          </div>
        </el-col>
        <el-col :span="14">
          <el-form label-position="left" :model="ruleForm" :rules="rules" label-width="130px" ref='ruleForm'>
            <el-form-item label="法人姓名" prop="name">
              <el-input v-model="ruleForm.name" size="small"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-input v-model="ruleForm.sex" size="small"></el-input>
            </el-form-item>
            <el-form-item label="民族" prop="nation">
              <el-input v-model="ruleForm.nation" size="small"></el-input>
            </el-form-item>
            <el-form-item label="出生年月日" prop="birthDate">
              <el-input v-model="ruleForm.birthDate" size="small"></el-input>
            </el-form-item>
            <el-form-item label="住址" prop="address">
              <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="ruleForm.address">
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="10">
          <div class="image image2">
            <img style="width:100%: overflow: hidden"
              :src="$route.query.data.idenBackImg"
              alt="" srcset="">
          </div>
        </el-col>
        <el-col :span="14">
          <el-form label-position="left" :model="ruleForm" :rules="rules" label-width="130px" ref='ruleForm2'>
            <el-form-item label="公民身份证号" prop="idcard">
              <el-input v-model="ruleForm.idcard" size="small"></el-input>
            </el-form-item>
            <el-form-item label="有效起始时间" prop="idenStartTime">
              <el-input v-model="ruleForm.idenStartTime" size="small"></el-input>
            </el-form-item>
            <el-form-item label="有效截止时间" prop="idenEndTime">
              <el-input v-model="ruleForm.idenEndTime" size="small"></el-input>
            </el-form-item>
            <el-form-item label="签发机关" prop="issuingAuthority">
              <el-input v-model="ruleForm.issuingAuthority" size="small"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div class="submitBUTTON mt24">
        <button @click="nextPage">下一页</button>
        <button @click="$router.go(-1)">返回</button>
      </div>
    </div>
    <div v-show="show" class="cardone">
      <h2 class="title2">司机驾驶证</h2>
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="image">
            <img style="width:100%: overflow: hidden"
              :src="$route.query.data.drivlicFaceImg"
              alt="" srcset="">
          </div>
          <div class="image">
            <img style="width:100%: overflow: hidden"
              :src="$route.query.data.drivlicBackImg"
              alt="" srcset="">
          </div>
        </el-col>
        <el-col :span="12">
          <el-form label-position="right" :model="ruleForm" :rules="rules" label-width="130px" ref='ruleForm3'>
            <el-form-item label="司机姓名" prop="drivlicName">
              <el-input v-model="ruleForm.drivlicName" size="small"></el-input>
            </el-form-item>
            <el-form-item label="司机证号" prop="drivlicNo">
              <el-input v-model="ruleForm.drivlicNo" size="small"></el-input>
            </el-form-item>
            <el-form-item label="准驾车型" prop="drivlicType">
              <el-input v-model="ruleForm.drivlicType" size="small"></el-input>
            </el-form-item>
            <el-form-item label="初次领证时间" prop="drivlicFirstTime">
              <el-input v-model="ruleForm.drivlicFirstTime" size="small"></el-input>
            </el-form-item>
            <el-form-item label="有效起始时间" prop="drivlicStartDate">
              <el-input v-model="ruleForm.drivlicStartDate" size="small"></el-input>
            </el-form-item>
            <el-form-item label="有效截止时间" prop="drivlicEndDate">
              <el-input v-model="ruleForm.drivlicEndDate" size="small"></el-input>
            </el-form-item>
            <el-form-item label="档案编号" prop="fileNumber">
              <el-input v-model="ruleForm.fileNumber" size="small"></el-input>
            </el-form-item>
            <!-- <el-form-item label="经营范围" prop="range">
              <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="ruleForm.range">
              </el-input>
            </el-form-item> -->
          </el-form>
        </el-col>
      </el-row>
      <div class="submitBUTTON mt24">
        <button @click="show=false">上一页</button>
        <button @click="submitTo()">确认</button>
      </div>
    </div>
  </div>
</template>

<script>
import { apiDriver } from "@/utils/api";
export default {
  name: "driverwrite",
  data() {
    //校验身份证号的正则表达式
    const checkCardId=(rule,value,callback)=>{
      let regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
      if(!regIdCard.test(value)){
        callback(new Error('请正确输入身份证号'))
      }
    }
    return {
      show: false,
      ruleForm: {
        name: '',
        sex: '',
        nation: '',
        birthDate: '',
        address: '',
        idcard: '',
        idenStartTime: '',
        idenEndTime: '',
        issuingAuthority: '',
        drivlicName: '',
        drivlicNo: '',
        drivlicType: '',
        drivlicFirstTime: '',
        drivlicStartDate: '',
        drivlicEndDate: '',
        fileNumber: '',
      },
      rules: {
        name:[{required:true,message:'请输入法人姓名',trigger:'blur'},{pattern: /^[\u2E80-\u9FFF]+$/,  message: "请输入汉字", trigger: "blur"}],
        sex:[{required:true,message:'请输入性别',trigger:'blur'},{pattern: /^男$|^女&/,  message: "请输入男或女", trigger: "blur"}],
        nation:[{required:true,message:'请输入民族',trigger:'blur'},{pattern: /^[\u2E80-\u9FFF]+$/,  message: "请输入汉字", trigger: "blur"}],
        birthDate:{required:true,message:'请输入出生年月日',trigger:'blur'},
        address:{required:true,message:'请输入住址',trigger:'blur'},
        idcard:[{required:true,message:'请输入身份证号',trigger:'blur'},{validator:checkCardId,trigger:'blur'}],
        idenStartTime:{required:true,message:'请输入有效起始时间',trigger:'blur'},
        idenEndTime:{required:true,message:'请输入有效截止时间',trigger:'blur'},
        issuingAuthority:{required:true,message:'请输入签发机关',trigger:'blur'},
        drivlicName:[{required:true,message:'请输入司机姓名',trigger:'blur'},{pattern: /^[\u2E80-\u9FFF]+$/,  message: "请输入汉字", trigger: "blur"}],
        drivlicNo:{required:true,message:'请输入司机证号',trigger:'blur'},
        drivlicType:{required:true,message:'请输入准驾车型',trigger:'blur'},
        drivlicFirstTime:{required:true,message:'请输入初次领证时间',trigger:'blur'},
        drivlicStartDate:{required:true,message:'请输入有效起始时间',trigger:'blur'},
        drivlicEndDate:{required:true,message:'请输入有效截止时间',trigger:'blur'},
        fileNumber:{required:true,message:'请输入档案编号',trigger:'blur'},

      }
    };
  },
  created() {},
  mounted() {
    console.log(this.$route);
  },
  methods: {
    // 下一页前校验
     nextPage(){
      this.$refs.ruleForm.validate((valid)=>{
        if(valid){
          this.$refs.ruleForm2.validate((valid)=>{
            if(valid){
            this.show=true;
            }
          })
        }
        else{
          console.log('error sumit');
          return false
        }
      })
    },
    submitTo() {
      // 审核通过校验才可提交
      this.$refs.ruleForm3.validate((valid)=>{
        if(valid){
           apiDriver({ ...this.ruleForm, ...{ driid: this.$route.query.data.driid } })
        .then(res => {
          this.$message({ message: "审核通过", type: "success" });
          this.$router.go(-1);
          // if (res.data.status == 2) {
          //   this.$message({ message: "审核中", type: "warning" });
          // } else if (res.data.status == 3) {
          //   this.$message({ message: "审核未通过", type: "error" });
          // } else if (res.data.status == 1) {
          //   this.$message({ message: "已认证", type: "success" });
          // }
        })
        .catch(error => {
          console.log(error);
        });
        }
      })
     
    }
  }
};
</script>

<style lang="scss" scoped>
#driverwrite {
  min-height: 100%;
  background-color: #fff;
  padding: 24px;
  box-sizing: border-box;
  .title2 {
    font-weight: normal;
    margin: 24px 0 14px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 20px;
  }
  .image {
    border: 1px solid rgba(0, 0, 0, 0.15);
    max-height: 360px;
    overflow-y: auto;
    img {
      width: 100%;
    }
    &.image2 {
      border: none;
      text-align: center;
      padding: 10px;
      img {
        width: 80%;
      }
    }
  }
}
</style>
